<HTML>
<HEAD>
  <!-- Created with AOLpress/2.0 -->
  <!-- AP: Created on: 23-Feb-2004 -->
  <!-- AP: Last modified: 21-Aug-2008 -->
  <TITLE>Multi Layered Editing of Type3 and SVG fonts</TITLE>
  <LINK REL="icon" href="fftype16.png">
  <LINK REL="stylesheet" TYPE="text/css" HREF="FontForge.css">
</HEAD>
<BODY>
<DIV id="in">
  <H1 ALIGN=Center>
    Multi Layered Editing of Type3 and SVG fonts
  </H1>
  <P>
  When loading a type3 font (or an svg font organized in a similar fashion)
  FontForge will retain information on each stroke and fill command. Each
  command is placed in a separate layer and may be edited in isolation.
  <P>
  A new font may be converted to a multi-layered font by selecting
  Element-&gt;Font Info-&gt;Layers-&gt;Multi Layered Font.
  <H2>
    <IMG SRC="charview-multilayer.png" WIDTH="348" HEIGHT="571" ALIGN="Right">Multi
    Layered editing in the outline view
  </H2>
  <P>
  In the image at left we have a glyph drawn by stroking two paths. One layer
  (containing one of the paths) is currently selected and is drawn in full.
  All its points are editable. The other layer is shown as a dashed line.
  <P>
  The Layer palette looks a little different here. There is no hinting information
  (hints are irrelevant in type3 fonts), instead there are two named layers
  (background and grid) which behave pretty much as they
  <A HREF="charview.html">normally</A> do. They may be made active by clicking
  on their names. They may be made invisible by turning off the check box
  associated with them.
  <P>
  Under these two are the layers that make up the glyph in the font. Each layer
  is identified by a small picture of what that layer looks like when rasterized.
  Clicking on the layer makes it editable.
  <P>
  The layers are ordered in the list as they will be drawn on the screen. The
  topmost layer is drawn first, the bottommost is drawn last. Regions drawn
  earlier will be overwritten by Regions drawn later.
  <P>
  Double clicking on a layer brings up the <A HREF="#Layer">Layer Info
  dialog</A>.
  <P>
  Clicking with the right button brings up the layer menu which contains:
  <DL>
    <DT>
      Layer Info...
    <DD>
      Brings up the <A HREF="multilayer.html#Layer">Layer Info</A> dialog on the
      current layer (same as double clicking)
    <DT>
      New Layer...
    <DD>
      Creates a new layer and brings up the <A HREF="multilayer.html#Layer">Layer
      Info</A> dialog to describe it. (the new layer will appear at the bottom
      of the layer list and will be drawn last)
    <DT>
      Del Layer
    <DD>
      Deletes the current layer (you may not delete the last layer in a glyph)
    <DT>
      First
    <DD>
      Make the current layer the first one to be drawn.
    <DT>
      Earlier
    <DD>
      Make the current layer be drawn earlier. (swaps it with the layer above it)
    <DT>
      Later
    <DD>
      Makes the current layer be drawn later. (swaps it with the layer below it)
    <DT>
      Last
    <DD>
      Makes the current layer be drawn last.
  </DL>
  <H3>
    Images
  </H3>
  <P>
  Images are allowed in Type3 fonts. You can use the
  <A HREF="filemenu.html#Import">File-&gt;Import</A> command to load an image
  into any of the foreground layers. If the image is a bitmap image and the
  layer will be filled, then it will be output with an imagemask command in
  PostScript (the bitmap will be drawn with the fill color), otherwise (and
  always in SVG) the image will be drawn with the colors specified in the image
  (Transparent images are not supported here).
  <P>
  FontForge will not skew, flip or rotate images.
  <H3>
    <A NAME="ClipPath">Clipping</A> Path
  </H3>
  <P>
  Each layer in a Type 3 font may have its own clipping path. A clipping path
  is a contour (or set of contours) and only things inside the clipping path
  will be drawn.
  <P ALIGN=Center>
  <IMG SRC="ClippedA.png" WIDTH="240" HEIGHT="218">
  <IMG SRC="ClippedARaster.png" WIDTH="148" HEIGHT="227">
  <P>
  The above example shows the letter "A" drawn with a clipping path that looks
  like a star burst (the clipping path is drawn in blue). To the right above
  is the result of rasterizing this image. The star is not drawn itself, but
  only the region of the A within the star will be drawn.
  <P>
  You can change the clipping path with the
  <CODE><A HREF="pointmenu.html#ClipPath">Points-&gt;Make Clip Path</A></CODE>
  command. The clipping path will be set to any selected contour(s) in the
  image. If no contour is selected then there will be no clipping path.
  <H2>
    <IMG SRC="layerdlg.png" WIDTH="422" HEIGHT="627" ALIGN="Right">The
    <A NAME="Layer">Layer</A> Info dialog
  </H2>
  <P>
  This dialog describes various attributes of the way the splines (or images)
  in the current layer are drawn.
  <P>
  A layer may be either stroked or filled. Or both. Or neither (layers containing
  only images need not be filled or stroked).
  <P>
  You may either specify a color to be used for stroking or filling the splines
  in the layer, or you may specify that the color should be inherited (in
  conventional fonts the color will be inherited so that the font user can
  specify the font's color). If you do want to specify a color, you can press
  the color wheel button to get a color picker dialog, or enter a 6 hex-digit
  rgb value "#rrggbb".
  <P>
  SVG fonts may include an opacity level (postscript type3 fonts may not).
  0 is fully transparent, 1.0 is fully opaque, .5 is translucent. Again this
  value may be inherited from the environment.
  <P>
  A stroke has a width (which again may be inherited, but probably should not
  be). Strokes are drawn using a circular pen. An elliptical pen may be specified
  by giving a transformation matrix here.
  <P>
  A line may be dashed. Dash patterns are specified as a list of numbers, the
  first number in the list will draw a line segment at most that many em-units,
  the next number will skip that many em-units, the third will be drawn, and
  so on. After then entire list has been used, it will start again at the begining.
  If the list has an odd number of elements, then this time through the first
  entry indicates that many units should be skipped. So "10" would mean a line
  which alternates being drawn every 10 units, while "20 10" would draw 20
  units, skip 10, draw 20 and so on.
  <P>
  A stroke needs to know how to treat the ends of paths (<CODE>Line Cap</CODE>),
  and how to join non-tangent path-segments (<CODE>Line Join</CODE>).
  <P>
  In an additional level of complexity a contour need not be filled (or stroked)
  with a constant color, you can provide a repeating pattern, or a gradual
  change from one color to another (a gradient).
  <H3>
    <IMG SRC="GradientDlg.png" WIDTH="404" HEIGHT="799" ALIGN="Right">Gradients
  </H3>
  <P>
  FontForge supports two kinds of gradients, linear gradients and radial gradients.
  In a linear gradient the color changes along a line (as in the example at
  right, and below)
  <P ALIGN=Center>
  <IMG SRC="LinearGradient.png" WIDTH="148" HEIGHT="132">
  <P>
  You can specify the color at any point along the gradient line (as a percentage
  of the distance along that line). The example at left only specifies a color
  (white) at the start of the line, and a color (grey) at the end, but intermediate
  values could be inserted, and a full range of RGB colors may be used.
  <P>
  A Radial gradient specifies a center point and a final radius, the start
  position (and color) is the center point and colors change in concentric
  circles until the final radius (and final color) is attained.
  <P ALIGN=Center>
  <IMG SRC="RadialGradient.png" WIDTH="149" HEIGHT="132">
  <IMG SRC="RadialGradientDlg.png" WIDTH="224" HEIGHT="177"><BR CLEAR=ALL>
  <H3>
    <A NAME="Patterns">Patterns</A>
  </H3>
  <P>
  <IMG SRC="TilePatternDlg.png" WIDTH="390" HEIGHT="449" ALIGN="Right">A contour
  may also be filled or stroked with a tiled pattern. That is a pattern is
  repeatedly layed down until it covers the entire area to be filled.
  <P ALIGN=Center>
  <IMG SRC="TiledPattern.png" WIDTH="212" HEIGHT="157">
  <P ALIGN=Left>
  In the example above the tile <IMG SRC="Tile.png" WIDTH="83" HEIGHT="78">
  has been scaled and replicated. The example at right is a bit more complex.
  Not only is the pattern replicated, but after that it is rotated through
  45 degrees
  <P ALIGN=Center>
  <IMG SRC="TiledPattern45.png" WIDTH="213" HEIGHT="157">
  <P ALIGN=Left>
  The pattern is defined in another glyph in the same font. By default the
  bounding box of that glyph will be used to describe the pattern's extent
  (You may change change that with
  <A HREF="charinfo.html#TileSize">Element-&gt;Glyph Info-&gt;Tile Size</A>).
  You may then scale it by specifying the Width and Height fields. You may
  apply other transformations as described in the dialog.
  <P>
  <P>
  FontForge's rasterization leaves much to be desired. It does not support
  full color (rounding everything to a shade of grey), and its stroking algorithm
  is quite poor (it does not rasterize dashes), it does not support the full
  complexity of radial gradients...
  <P>
  <P ALIGN=Center>
  -- <A HREF="charview.html">Back</A> -- <A HREF="overview.html">TOC</A> --
  <P>
  <P>
</DIV>
</BODY></HTML>
